<template><div class="text_logo" :class="name && name.length < 4 ? 'text_logo_sort' : ''" :style="`background:#${getColors()}`">{{ name }}</div></template>
<script>
import { COLOR_LIST } from '@/utils/constants'
export default {
    name: 'TextLogo',
    props: {
        name: {
            type: [String, Number],
            default: ''
        }
    },
    data() {
        return {
            COLOR_LIST
        }
    },
    methods: {

        // 动态展示颜色背景
        getColors() {
            let num = parseInt(Math.random() * 4)
            let colors = COLOR_LIST[num];
            return colors;
        }

    }
}
</script>
<style lang="less" scoped>
.text_logo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    padding: 0 11px;
    box-sizing: border-box;
    text-align: center;
    word-break: break-all;
    
}

.text_logo_sort {
    padding: 0;
}
</style>
